<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            background-color: aqua;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        div:active{
            background-color: blueviolet;
        } */
        /* div {
            font-size: 20px;
        } */
        .light {
            background-color:aliceblue;
            color: black;
        }
        .dark {
            background-color: black;
            color:aliceblue;
        }
    </style>
</head>
<body>
    <!-- <div class = "one">泉城济南，泉甲天下</div>
    <div class = "one">齐风陶韵，生态淄博</div>
    <div class = "two">走遍四海，还是威海</div>
    <div class = "two">红瓦绿树，碧海蓝天</div> -->

    <!-- <input class = "Butone" type = "button" value = "点我" onclick = "test()">
    <input class = "Buttwo" type = "button" value = "再次点我"> -->

    <!-- 所有的HTML元素都能实现点击的效果 -->

    <!-- <img src="威少.png" alt="俄克拉荷马的神" title="三双王-威少"> -->

    <!-- <input type="password" id="password">
    <input type="button" id="button" value="显示密码"> -->

    <!-- <input type="button" id="jian" value="-">
    <input type="text" id="text" value="0">
    <input type="button" id="jia" value="+"> -->

    <!-- <div style="font-size: 20px;">公诚勇毅</div> -->

    <!-- <div class="light">
        齐风陶韵，生态淄博<br/>
        江北水城，运河古都
    </div> -->

    <div class="container">
        <div class="one">齐风陶韵，生态淄博</div>
        <div class="two">孙子故里，生态滨州</div>
    </div>
    <script>
        //事件
        //操作节点

        //新增节点
        let div = document.createElement('div');
        div.innerHTML = '山东';
        div.className = 'new';
        div.style.fontSize = '20px';
        console.log(div);

        //上户口
        let container = document.querySelector('.container');
        // container.appendChild(div);

        //在div的某个子元素前面添加新的节点
        // let two = document.querySelector('.two');
        let two = container.children[1];
        container.insertBefore(div,two);

        //再插入一次，迁户口操作，操作的是同一个对象，只是移动了位置
        let one = container.children[0];
        container.insertBefore(div,one);

        container.removeChild(one);
        //获取修改样式属性 
        //类名样式  常用哦，如切换“夜间模式”
        // let div = document.querySelector('div');
        // div.onclick = function(){
        //     if(div.className == 'light'){
        //         div.className = 'dark';
        //     }else{
        //         div.className = 'light';
        //     }
        // }
        //行内样式
        // let div = document.querySelector('div');
        // div.onclick = function(){
        //     let value = parseInt(div.style.fontSize);
        //     console.log(value);
        //     value += 10;
        //     div.style.fontSize = value + 'px';
        // }

        //获取修改元素属性
        //自增 自减
        // let text = document.querySelector('#text');
        // let Bjia = document.querySelector('#jia');
        // let Bjian = document.querySelector('#jian');
        // Bjia.onclick = function(){
        //     let value = parseInt(text.value);
        //     value++;
        //     text.value = value;
        // }
        // Bjian.onclick = function(){
        //     let value = parseInt(text.value);
        //     value--;
        //     text.value = value;
        // }
        //显示密码
        // let password = document.querySelector('#password');
        // let button = document.querySelector('#button');
        // button.onclick = function(){
        //     if(button.value == '显示密码'){
        //         password.type = 'text';
        //         button.value = '隐藏密码';
        //     }else{
        //         password.type = 'password';
        //         button.value = '显示密码';
        //     }
        // }
        //换图片
        // let img = document.querySelector("img");
        // console.dir(img);
        // img.onclick = function(){
        //     img.src = "火箭威少.jpg";
        //     img.title = "二哥";
        // }

        //获取修改元素内容
        // let lick = document.querySelector("div");
        // lick.onclick = function(){
        //     if(lick.innerHTML == "公诚勇毅"){
        //         lick.innerHTML = "考得上！";
        //     }else{
        //         lick.innerHTML = "公诚勇毅";
        //     }
        // }

        // lick.innerHTML = "<span> 考不上 </span>";

        // lick.onclick = function(){
        //     console.log("西北工业");
        // }

        // let button = document.querySelector(".Buttwo");
        // button.onclick = function(){
        //     console.log("用户再次点击了按钮");
        // }

        // function test(){
        //     console.log("用户点击了按钮");
        // }

        // //获取单个对象，重复取第一个
        // let one = document.querySelector(".one");
        // //log打印HTML语句
        // console.log(one);
        // //dir打印对象，可以看到对象的属性
        // console.dir(one);

        // //获取多个对象  伪数组
        // let two = document.querySelectorAll(".two");
        // console.dir(two);
    </script>
</body>
</html>